<template>
  <div
    class="title-wrap"
    :class="[!line ? 'no-line' : '', noLineHeight ? 'no-line-padding' : '']"
    :style="{ width: empty ? emptywidth : 'auto' }"
  >
    <div v-if="name && showTitle" class="title-info">
      <div class="icon">
        <slot name="tip"></slot>
      </div>
      <div class="name"><em v-if="required">*&nbsp;&nbsp;</em>{{ name }}</div>
      <div class="right">
        <slot name="append"></slot>
      </div>
    </div>
    <div v-if="needcontainer">
      <div
        v-show="empty"
        :class="['empty-tip', empty ? '' : 'noshow']"
        :style="{ height: emptyheight }"
      >
        <span>
          {{ emptytips }}
        </span>
      </div>
      <div v-show="!empty" :class="['title-container', empty ? 'noshow' : '']">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    line: {
      type: Boolean,
      default: true,
    },
    noLineHeight: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    needcontainer: {
      type: Boolean,
      default: true,
      require: false,
    },
    empty: {
      type: Boolean,
      default: false,
      require: false,
    },
    emptytips: {
      type: String,
      default: "暂无内容",
      require: false,
    },
    emptyheight: {
      type: String,
      default: "100%",
    },
    emptywidth: {
      type: String,
      default: "auto",
    },
    showTitle: {
      type: Boolean,
      default: true,
      require: false,
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
.title-wrap {
  // width: auto;
  height: auto;
  box-sizing: border-box;
  border-radius: 6px 6px 0 0;
  border-bottom: 1px solid #e1e2e5;
  background: #fff;
  zoom: 1;
  line-height: 20px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  .title-info {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: $themeColor;
    height: 40px;
    line-height: 40px;
    position: relative;
    z-index: 1;
    .icon {
      position: absolute;
      left: 10px;
    }

    div.name {
      margin: 0 auto;
      font-size: 16px;
      color: #ffffff;
      font-weight: bold;

      em {
        font-style: normal;
        color: #ec6324;
      }
    }

    .right {
      position: absolute;
      right: 10px;
    }
  }
  .empty-tip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      margin-top: 170px;
      font-size: 20px;
      color: $themeColor;
    }
  }
  .title-container {
    // width: 100%;
    // height: 100%;
  }
}

.title-wrap.no-line {
  border-bottom: 0 none;
}

.title-wrap.no-line-padding {
  margin-bottom: 0;

  .title-container {
    padding: 0;
  }
}

.title-wrap:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.noshow {
  display: none;
}
</style>
